Mini Game,Farbcode sortieren

Sortiere die Farbcodes zu den angezeigten Farben und teste somit dein wissen
Kommentar abgeben zu diesen Beitrag/Code ?
Dann hier klicken

Der hier verwendete Code

<style> .draganddropKeywords { padding:10px; border:2px solid #8C0099; text-align: center; border-radius: 10px; box-shadow: 4px 4px 3px 0px rgba(176,176,176,1); background-color: #E6D1E8; min-height: 40px; } .draganddropText { padding:10px; border:2px solid #8C0099; font-family: arial; border-radius: 10px; box-shadow: 4px 4px 3px 0px rgba(176,176,176,1); background-color: #E6D1E8; } .dropElement { min-width:126px; height:36px; margin: 2px; padding:2px; border:1px solid #aaaaaa; text-align: center; display: inline-block; vertical-align: middle; border-radius: 4px; background-color: #FFFFFF; float: none !important; } .dragElement { display: inline-block; padding:6px 0 6px 0px; margin: 2px; background: #bd79b3; min-width: 120px; cursor: pointer; cursor: hand; font-family: arial; font-weight: bold; font-style: italic; border-radius: 2px; } #draganddropButton { padding:10px; border:2px solid #8C0099; text-align: center; border-radius: 10px; box-shadow: 4px 4px 3px 0px rgba(176,176,176,1); background-color: #8C0099; background-image: none; text-shadow: none; color: #ffffff; min-height: 40px; margin: 10px; } #draganddropButton:hover{ background-color: #E6D1E8; color: #8C0099; cursor: pointer; cursor: hand; } tr td{ width:25vw; } </style> <H2>Sortiere Die Farbcodes zu den richtigen Farben</H2> <div id="div0" class="draganddropKeywords" ondrop="drop(event)" ondragover="allowDrop(event)"> <div class="dragElement" id="drag6" draggable="true" ondragstart="drag(event)">#C40000</div> <div class="dragElement" id="drag4" draggable="true" ondragstart="drag(event)">#000000</div> <div class="dragElement" id="drag9" draggable="true" ondragstart="drag(event)">#00FFFF</div> <div class="dragElement" id="drag5" draggable="true" ondragstart="drag(event)">#00FF00</div> <div class="dragElement" id="drag10" draggable="true" ondragstart="drag(event)">#750075</div> <div class="dragElement" id="drag2" draggable="true" ondragstart="drag(event)">#AAAAAA</div> <div class="dragElement" id="drag8" draggable="true" ondragstart="drag(event)">#FFFF00</div> <div class="dragElement" id="drag3" draggable="true" ondragstart="drag(event)">#333333</div> <div class="dragElement" id="drag7" draggable="true" ondragstart="drag(event)">#9999FF</div> <div class="dragElement" id="drag1" draggable="true" ondragstart="drag(event)">#FFFFFF</div> </div> <div class="draganddropText"> <table cellspacing=5 cellpadding=2> <TR> <td style="background:#FFFFFF">White</TD> <TD><span id="div1" class="dropElement" ondrop="drop(event)" ondragover="allowDrop(event)"></TD> <td style="background:#C40000">Dark Red</TD> <TD><span id="div6" class="dropElement" ondrop="drop(event)" ondragover="allowDrop(event)"></TD> </TR><br> <TR> <td style="background:#AAAAAA">Light Grey</TD> <TD id="div2" class="dropElement" ondrop="drop(event)" ondragover="allowDrop(event)"></TD> <td style="background:#9999FF">Light Blue</TD> <TD id="div7" class="dropElement" ondrop="drop(event)" ondragover="allowDrop(event)"></TD> </TR> <TR><td style="background:#333333">Dark Grey</TD> <TD id="div3" class="dropElement" ondrop="drop(event)" ondragover="allowDrop(event)"></TD> <td style="background:#FFFF00">Yellow</TD> <TD id="div8" class="dropElement" ondrop="drop(event)" ondragover="allowDrop(event)"></TD> </TR> <TR> <td style="background:#000000">Black</TD> <TD id="div4" class="dropElement" ondrop="drop(event)" ondragover="allowDrop(event)"></TD> <td style="background:#00FFFF">Cyan</TD> <TD id="div9" class="dropElement" ondrop="drop(event)" ondragover="allowDrop(event)"></TD> </TR> <TR><td style="background:#00FF00">Green</TD> <TD id="div5" class="dropElement" ondrop="drop(event)" ondragover="allowDrop(event)"></TD> <td style="background:#750075">Purple</T> <TD id="div10" class="dropElement" ondrop="drop(event)" ondragover="allowDrop(event)"></TD> </TR> </TABLE><br> <center> <input type="button" id="draganddropButton" value="Check my answers" onClick="checkMyAnswers(10);"></center> </div> <script> function allowDrop(ev) { ev.preventDefault(); } function drag(ev) { ev.dataTransfer.setData("text", ev.target.id); } function drop(ev) { ev.preventDefault(); var data = ev.dataTransfer.getData("text"); ev.target.appendChild(document.getElementById(data)); } function checkMyAnswers(number) { var score = 0; for (i = 1; i <= number; i++) { var parentDIV = document.getElementById("drag" + i).parentNode; if (parentDIV.id==("div" + i)) { parentDIV.style.backgroundColor="#64DE57"; score++; } else { document.getElementById("div" + i).style.backgroundColor="#FA323C"; } } alert("You scored " + score + " out of " + number + "."); } </script>